<template>
    <div class="play">
      <div class="top">
        <div class="top-left">
          <img class="login" src="./icons/flash.png" alt="">
          <span>好货有限 赶紧下单呦</span>
        </div>
        <div class="top-right">
          <span>距结束</span>
          <div class="time">
            <!--<span class="num" v-for="(val, key) in time" :key="key">{{val}}</span>-->
            <span class="nums">14</span>
            <span class="num">: </span>
            <span class="nums">30</span>
            <span class="num">:</span>
            <span class="nums">31</span>
          </div>
        </div>
      </div>
      <div class="center" v-for="(val, key) in center" :key="key">
        <img class="center-left" :src="val.img" alt="">
        <div class="center-right">
          <p>{{val.sock}}</p>
          <div class="right">
            <span>{{val.comfort}}</span>
            <span>|</span>
            <span>{{val.seasons}}</span>
            <span>|</span>
            <span>{{val.deodorize}}</span>
          </div>
          <div class="post">
            <span>{{val.post}}</span>
          </div>
          <div class="price">
            <span class="moneys"><span>￥</span>{{val.moneys}}</span>
            <span class="money">￥{{val.money}}</span>
          </div>
          <div class="grad">
            <span>{{val.grad}}</span>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'plays',
  data () {
    return {
      center: [
        {img: require('../../components/pages/image/icons/M2.SS2_400x400.jpg'), sock: '雅鹿/yaloo 5双袋装春夏款男士运动袜中筒袜子 四季款防臭...', comfort: '舒适耐穿', seasons: '四季可穿', deodorize: '防臭吸汗', post: '包邮', moneys: 8.8, money: 25.8, grad: '马上抢'},
        {img: require('../../components/pages/image/icons/M2.SS2_400x400.jpg'), sock: '雅鹿/yaloo 5双袋装春夏款男士运动袜中筒袜子 四季款防臭...', comfort: '舒适耐穿', seasons: '四季可穿', deodorize: '防臭吸汗', post: '包邮', moneys: 8.8, money: 25.8, grad: '马上抢'},
        {img: require('../../components/pages/image/icons/M2.SS2_400x400.jpg'), sock: '雅鹿/yaloo 5双袋装春夏款男士运动袜中筒袜子 四季款防臭...', comfort: '舒适耐穿', seasons: '四季可穿', deodorize: '防臭吸汗', post: '包邮', moneys: 8.8, money: 25.8, grad: '马上抢'},
        {img: require('../../components/pages/image/icons/M2.SS2_400x400.jpg'), sock: '雅鹿/yaloo 5双袋装春夏款男士运动袜中筒袜子 四季款防臭...', comfort: '舒适耐穿', seasons: '四季可穿', deodorize: '防臭吸汗', post: '包邮', moneys: 8.8, money: 25.8, grad: '马上抢'},
        {img: require('../../components/pages/image/icons/M2.SS2_400x400.jpg'), sock: '雅鹿/yaloo 5双袋装春夏款男士运动袜中筒袜子 四季款防臭...', comfort: '舒适耐穿', seasons: '四季可穿', deodorize: '防臭吸汗', post: '包邮', moneys: 8.8, money: 25.8, grad: '马上抢'}
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.play{
  position: absolute;
  top: 370px;
  width: 1165px;
  overflow: hidden;
  margin-left: 42px;
  .top, .center{
    background: #fff;
    border-radius: 40px;
    margin-bottom: 40px;
  }
  .top{
    height: 200px;
    justify-content: space-around;
    align-items: center;
    display: flex;
    span{
      font-size: 45px;
    }
    .top-left{
      width: 520px;
      display: flex;
      justify-content: space-around;
      .login{
        width: 60px;
        height: 60px;
      }
    }
    .top-right{
      width: 480px;
      display: flex;
      justify-content: space-around;
      .time{
        height: 66px;
        display: flex;
        .nums:nth-child(5){
          background: red;
        }
        .nums{
          width: 66px;
          line-height: 66px;
          background: #4d4d4d;
          font-size: 32px;
          text-align: center;
          display: inline-block;
          color: #fff;
          border-radius: 15px;
        }
        .num{
          width: 40px;
          text-align: center;
        }
      }
    }
  }
  .center{
    height: 490px;
    align-items: center;
    justify-content: space-around;
    display: flex;
    .center-left{
      width: 430px;
      height: 430px;
    }
    .center-right{
      width: 605px;
      height: 430px;
      position: relative;
      p{
        font-size: 43px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
      }
      .right{
        height: 40px;
        span{
          font-size: 34px;
          color: #9a9a9a;
        }
      }
      .post{
        background: #eb4f3f;
        width: 125px;
        line-height: 60px;
        color: #fff;
        font-size: 30px;
        margin-top: 80px;
        text-align: center;
        border-radius: 40px;
      }
      .price{
        margin-top: 50px;
        .moneys{
          font-size: 50px;
          color: #eb4f3f;
          span{
            font-size: 30px;
          }
        }
        .money{
          font-size: 30px;
          text-decoration: line-through;
          color: #cccccc;
        }
      }
      .grad{
        position: absolute;
        right: 0;
        bottom: 0;
        width: 190px;
        line-height: 85px;
        background: #ed7655;
        text-align: center;
        border-radius: 40px;
        span{
          font-size: 40px;
          color: #fff;
        }
      }
    }
  }
}
</style>
